<template>
  <div class="container">
    <div class="header clearfix">
      <img :src="ImgBaseUrl+'/mp_3.1.6/支付成功/支付成功图标/安卓/hdpi/支付成功.png'"
           alt
           v-if="ImgBaseUrl"
           class="success-icon" />
      <div class="msg">支付成功</div>
      <div class="order_price">
        <div class="icon">￥</div>
        <div class="num">{{order_price}}</div>
      </div>
      <div class="btn-bar">
        <div class="btn gray"
             @tap="back_main()">返回主页</div>
        <div class="btn red"
             @tap="tocheckOrder()">查看订单</div>
      </div>
    </div>
    <!-- 热门推荐 -->
    <div class="hot-recommend">
      <div class="rec-title">
        <img :src="ImgBaseUrl+'/mp_3.1.6/热门推荐图标/iOS/形状结合@2x.png'"
             v-if="ImgBaseUrl"
             alt
             class="icon" />
        <div class="msg">热门推荐</div>
      </div>
      <shoplist :mall_List="mallList"></shoplist>
      <div class="daodi">因为甄选，所以珍稀</div>
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
import shoplist from "@/components/shop_list/shop_list";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      mallList: [],
      order_price: 0
    };
  },
  onShow: function (options) {
    wx.setNavigationBarTitle({
      title: "订单支付"
    });
    wx.setNavigationBarColor({
      frontColor: "#333333", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.get_hot_recommend();
  },
  onLoad (options) {
    this.order_price = options.order_price || 0;
  },
  components: { shoplist },
  methods: {
    // 查看订单
    tocheckOrder () {
      wx.redirectTo({ url: "/pages/package_mine/my_order/main?type=2" });
    },
    // 返回主页
    back_main () {
      wx.redirectTo({ url: "/pages/shop_mall/main" });
    },
    // 获取热门推荐列表
    get_hot_recommend () {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("/api/v4_5/shop_cart/recommend", {}, result => {
        let res = result.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          this.mallList = res.data;
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  overflow: auto;
  .header {
    width: 100%;
    background-image: url("http://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/%E8%83%8C%E6%99%AF/%E5%AE%89%E5%8D%93/xhdpi/%E7%9F%A9%E5%BD%A2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .success-icon {
      width: 70px;
      height: 70px;
      display: block;
      margin: 40px auto 0;
    }
    .msg {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin: 14px auto 0;
      text-align: center;
    }
    .order_price {
      margin: 6px auto 0;
      text-align: center;
      .icon {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        display: inline-block;
        vertical-align: bottom;
      }
      .num {
        font-size: 20px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        display: inline-block;
        vertical-align: bottom;
      }
    }
    .btn-bar {
      margin: 28px 66px 40px;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 106px;
        height: 38px;
        border-radius: 100px;
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        line-height: 38px;
        text-align: center;
        &.gray {
          background: rgba(242, 242, 242, 1);
          color: rgba(153, 153, 153, 1);
        }
        &.red {
          background: linear-gradient(
            226deg,
            rgba(254, 120, 161, 1) 0%,
            rgba(254, 123, 136, 1) 100%
          );
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
  .hot-recommend {
    margin-top: 24px;
    .rec-title {
      text-align: center;
      margin-bottom: 12px;
      .icon {
        width: 11px;
        height: 10px;
        display: inline-block;
        vertical-align: middle;
      }
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
      }
    }
    .daodi {
      width: 100%;
      text-align: center;
      font-size: 12px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: #999990;
      line-height: 20px;
      margin: 0px auto;
    }
  }
}
</style>

